<template>
    <div class="left">
      <div class="left-top">
        <div class="editor-header">元素</div>
        <div class="editor-comp-tree">
          <template v-if="contentData.length > 0">
          <div v-for="(item,index) in contentData" :key="item.id" class="editor-comp-tree-item" :class="{'tree-item-current':currentContentId == item.id ? true : false}" @click="tapComponent(index)">
            {{item.name}}
          </div>
          </template>
          <div class="editor-comp-none" v-else>暂无已选组件</div>
        </div>
      </div>
  </div>
</template>
<script scoped>
export default {
  name: "custpageEditorCompTree",
  components: {
    
  },
  created(){

  },
  mounted(){

  },
  props:{
    contentData:{
      type:Array,
      default(){
        return []
      }
    },
    currentContentId:{
      type:Number,
      default(){
        return 0
      }
    }
  },
  data() {
    return {

    };
  },
  methods: {
    tapComponent(index){
      this.$emit('tapTreeItem',index)
    }
  },

};
</script>

<style scoped>
.left-top{height:300px;flex:0 0 300px;}
.editor-comp-tree{height:260px;}
.editor-comp-tree-item{padding:10px;cursor:pointer;}
.editor-comp-tree-item:hover{background:#eee;}
.editor-comp-none{display: flex;align-items: center;justify-content: center;width:100%;height:100%;}
.tree-item-current{background: #eee;}
.left-bottom{height:100%}
</style>
